<script setup name="login">
import { ref } from 'vue'
import { login, setNewUser } from '@/services/login.js'
import { useRouter } from 'vue-router'
import { useUserStore } from '@/stores'
import { ElMessage } from 'element-plus'

let router = useRouter()
let userStore = useUserStore()

// 两个form
let form1 = ref(null)
let form2 = ref(null)

// 选项卡
const activeName = ref('login')

// 登录表单数据
const form = ref({
  phone: '18075917056',
  password: 'L740816T'
})

// 注册表单
const register = ref({
  account: '',
  phone: '',
  password: ''
})

// 校验规则
let rules = ref({
  phone: [
    { required: true, message: '必填！', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '格式不正确', trigger: 'blur' }
  ],
  password: [{ required: true, message: '密码不能少！', trigger: 'blur' }],
  account: [
    { required: true, message: '必填', trigger: 'blur' },
    { min: 1, max: 6, message: '只能在1-6位之间', trigger: 'blur' }
  ]
})

// 游客登录
function tourist() {
  router.push('/welcome')
}

// 用户登录
async function loginFn() {
  // 校验表单
  await form1.value.validate()
  // 发送请求
  let { code, data, msg } = await login(form.value)
  // 得到token,存储token
  if (code !== 20011) return ElMessage.error(msg)
  // 本地存储token之后,跳转到home
  saveStorage(data)
  ElMessage.success('登陆成功！')
  // 清空表单数据
  tourist()
  removeAllFromInfo()
  // 如果有回跳页面就跳转回回跳页面，回跳要从路径中获取
}

// 用户注册
async function userRegistration() {
  // 先验证表单
  await form2.value.validate()
  // 发送请求
  let { code, data } = await setNewUser({ ...register.value })
  if (code !== 20011) return ElMessage.error('注册失败，请检查原因')
  saveStorage(data)
  ElMessage.success('注册成功！')
  // 拿到token访问登录页
  tourist()
  removeAllFromInfo()
}

// 移除表单当前的所有信息
function removeAllFromInfo() {
  form1.value.resetFields()
  form2.value.resetFields()
}
// 存入token
function saveStorage(tokenObj) {
  userStore.setToken({ ...tokenObj })
}
</script>

<template>
  <div class="login">
    <div class="login-box">
      <!-- left -->
      <div class="left">
        <el-tabs v-model="activeName" class="demo-tabs">
          <!-- 登录选项卡 -->
          <el-tab-pane label="登录" name="login">
            <el-form
              :rules="rules"
              :model="form"
              label-position="top"
              label-width="120px"
              ref="form1"
            >
              <!-- 表单 -->
              <el-form-item prop="phone">
                <div class="form-text">
                  <span>手机号</span>
                </div>
                <el-input v-model="form.phone" />
              </el-form-item>
              <el-form-item prop="password">
                <span class="form-text">密码</span>
                <el-input
                  show-password
                  type="password"
                  v-model="form.password"
                />
              </el-form-item>
              <!-- 按钮 -->
              <el-form-item>
                <el-button type="primary" @click="loginFn">登录</el-button>
              </el-form-item>
              <el-divider content-position="left">
                <span class="divider">你也可以选择</span>
              </el-divider>
              <el-form-item>
                <el-button type="info" @click="tourist">游客访问</el-button>
              </el-form-item>
            </el-form>
          </el-tab-pane>
          <!-- 注册选项卡 -->
          <el-tab-pane label="注册" name="register">
            <el-form
              :rules="rules"
              :model="register"
              label-position="top"
              label-width="120px"
              ref="form2"
            >
              <!-- 表单 -->
              <el-form-item prop="account">
                <div class="form-text">
                  <span>昵称</span>
                </div>
                <el-input v-model="register.account" />
              </el-form-item>
              <el-form-item prop="phone">
                <div class="form-text">
                  <span>手机号</span>
                </div>
                <el-input v-model="register.phone" />
              </el-form-item>
              <el-form-item prop="password">
                <span class="form-text">密码</span>
                <el-input
                  show-password
                  type="password"
                  v-model="register.password"
                />
              </el-form-item>
              <!-- 按钮 -->
              <el-form-item>
                <el-button type="primary" @click="userRegistration"
                  >注册</el-button
                >
              </el-form-item>
            </el-form>
          </el-tab-pane>
        </el-tabs>

        <!-- 图标-->
        <div class="title-ico"></div>
      </div>
      <!-- right -->
      <div class="right">
        <div class="tex">
          <div class="blok">浏览笔记？Come here!!</div>
          <div class="explain">
            个人博客网站，为防备封闭开发环境下，无法访问个人笔记而设立的开源分享！
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.login {
  height: 100vh;
  width: 100%;
  background-color: #eff3f6;
  display: flex;
  align-items: center;
  justify-content: center;
  .login-box {
    width: 825px;
    height: 393px;
    background-color: #fff;
    display: flex;
    border-radius: 4px;

    .right,
    .left {
      height: 100%;
      padding: 30px;
    }
    .left {
      width: 340px;
      padding-top: 40px;
      position: relative;
      .title-ico {
        position: absolute;
        top: -22px;
        left: 30px;
        width: 44px;
        height: 44px;
        background-image: url(../../../public/favicon.png);
        background-repeat: no-repeat;
      }
      .title-span {
        font-size: 22px;
      }
      .form-text {
        font-size: 14px;
        color: #7f8fa4;
      }
      .el-button {
        width: 100%;
      }
      .divider {
        color: #7f8fa4;
      }
    }
    .right {
      flex: 1;
      background-image: url(../../assets/login/bgc.png);
      background-repeat: no-repeat;
      background-size: 100%;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      .blok {
        font-size: 18px;
        padding: 10px 0px;
        color: #fff;
        opacity: 0.7;
      }
      .explain {
        width: 80%;
        font-size: 12px;
        line-height: 2;
        color: #fff;
        opacity: 0.7;
      }
    }
  }
}
</style>
